<template>
  <div class="banner">
    <!-- 工具栏 -->
    <div class="toolbar">
      <div class="left">
        <el-button type="primary"
                   icon="el-icon-plus"
                   @click="addBanner">添加</el-button>
      </div>
    </div>
    <!-- 表格区域 -->
    <div class="tablebox">
      <el-table border
                stripe
                :data="tableData"
                v-loading='loading'>
        <el-table-column label="编号"
                         prop="bannerId"
                         width="80">
          <template slot-scope="scope">{{scope.$index+1}}</template>
        </el-table-column>
        <el-table-column label="图片预览"
                         prop="imgUrl"
                         width="220">
          <template slot-scope="scope">
            <img :src="scope.row.imgUrl"
                 alt
                 width="200"
                 height="100" />
          </template>
        </el-table-column>
        <el-table-column label="图片名称"
                         prop="imgName"></el-table-column>
        <el-table-column label="链接地址"
                         prop="linkUrl"></el-table-column>
        <el-table-column label="状态"
                         prop="status">
          <template slot-scope="scope">
            <el-tag size="medium"
                    v-if="scope.row.status">正常</el-tag>
            <el-tag size="medium"
                    v-else
                    type="danger">禁用</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="创建时间"
                         prop="createTime">
          <template slot-scope="scope">{{ scope.row.createTime | timer }}</template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini"
                       @click="editBanner(scope.row)">编辑</el-button>
            <el-button size="mini"
                       type="danger"
                       @click="deleteBanner(scope.row.bannerId)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 编辑弹框 -->
      <el-dialog title="提示"
                 :visible.sync="dialogVisible"
                 :before-close="handleClose">
        <div class="eidtbox">
          <el-form :model="editObj"
                   label-width="100px"
                   :rules="rules"
                   ref="editForm">
            <el-form-item label="轮播图名称:"
                          prop="imgName">
              <el-input v-model="editObj.imgName"></el-input>
            </el-form-item>
            <el-form-item label="链接地址:"
                          prop="linkUrl">
              <el-input v-model="editObj.linkUrl"></el-input>
            </el-form-item>
            <el-form-item label="状态:">
              <el-radio-group v-model="editObj.status">
                <el-radio :label="1">正常</el-radio>
                <el-radio :label="0">禁用</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item>
              <el-upload class="avatar-uploader"
                         :action="actionUrl"
                         :headers="headers"
                         :show-file-list="false"
                         name="banner"
                         :before-upload="beforeUpload"
                         :on-success="handleAvatarSuccess">
                <img v-if="editObj.imgUrl"
                     :src="editObj.imgUrl"
                     class="avatar" />
                <i class="el-icon-plus avatar-uploader-icon"
                   v-else></i>
              </el-upload>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer"
              class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary"
                     @click="sureEdit">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getBanner, deleteBanner, editBanner } from '@/api'
import { mapGetters } from 'vuex'
export default {
  data () {
    return {
      headers: { Authorization: "" },
      editDiaShow: false,
      loading: true,
      dialogVisible: false,
      actionUrl: "http://192.168.1.9:3000/api/admin/upload/",
      editObj: {
        bannerId: 1,
        imgName: "张三",
        linkUrl: "zs@qq.com",
        status: 1,
        imgUrl: ""
      },
      tableData: [],
      rules: {
        imgName: [
          { required: true, message: "轮播图名称不能为空", trigger: "blur" }
        ],
        linkUrl: [
          { required: true, message: "链接地址不能为空", trigger: "blur" }
        ]
      }
    };
  },
  created () {
    this.headers.Authorization = 'Bearer ' + this.getUserInfo.token;
    this.getBanner()
  },
  computed: {
    ...mapGetters('login', ['getUserInfo'])
  },
  methods: {
    uploadSuccess (res, file) {
      this.editObj.imgUrl = res.data.imgUrl;
    },
    beforeUpload (file) {
      const isJPG = file.type === "image/png"; //如果是jpeg格式，true，false
      const isLt2M = file.size / 1024 / 1024 < 2; //如果是小于2M  true，flase

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 png 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    //添加
    getBanner () {
      getBanner().then(data => {
        if (data.data.code == 200 && data.data.msg == '成功') {
          this.tableData = data.data.data;
          this.loading = false;
        }
      })
    },
    //新增跳转
    addBanner () {
      // console.log(123)
      this.$router.push({ name: 'addbanner' })
    },
    //删除
    deleteBanner (id) {
      deleteBanner({ bannerId: id }).then(res => {
        // console.log(data);
        if (res.code == 200 && res.msg == "删除成功") {
          this.getBanner()
        }
      });
    },
    handleClose (done) {
      done();
    },
    //编辑
    editBanner (row) {
      // console.log(this.addObj);
      this.editObj.bannerId = row.bannerId;
      this.editObj.imgName = row.imgName;
      this.editObj.linkUrl = row.linkUrl;
      this.editObj.status = row.status;
      this.editObj.imgUrl = row.imgUrl;
      this.dialogVisible = true;
    },
    sureEdit () {
      editBanner(this.editObj).then(res => {
        if (res.code == 200 && res.msg == '编辑成功') {
          this.dialogVisible = false;
          this.getBanner();
        }
      })
    },
    handleAvatarSuccess (res, file) {
      // console.log(res, 111111)
      this.editObj.imgUrl = res.data.imgUrl
    },
    beforeUpload (file) {
      const isJPG = file.type === "image/png"; //如果是jpeg格式，true，false
      const isLt2M = file.size / 1024 / 1024 < 2; //如果是小于2M  true，flase

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 png 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
  },
};
</script>

<style lang="less" scoped>
.banner {
  width: 100%;
  min-height: calc(100vh - 98px);
  background: #fff;
  padding: 15px;
  .toolbar {
    margin-bottom: 20px;
    overflow: hidden;
    .left {
      float: left;
    }
  }
  .page {
    text-align: center;
    margin-top: 20px;
  }
  .eidtbox {
    width: 400px;
    margin: 0 auto;
  }
}

.avatar-uploader /deep/.el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>